<template>
	<view class="all">
		<view class="navbar">
			<view class="navbar-flex">
				<!-- 主页模式 -->
				<view v-if="mode==='main'">
					<view :style="{height:statusHeight*2 +'rpx'}"></view>
					<view class="navbar-content">
						<view class="navbar-content-back">
							<uni-icons @click="openDrawer" type="bars" size="30" color="#fff"></uni-icons>
						</view>
						<view class="navbar-content-search" @click="toSearch">
							<view class="navbar-content-search-icon">
								<uni-icons type="search" size="20"></uni-icons>
							</view>
							<view class="navbar-content-search-text">i9-10900</view>
						</view>
					</view>
				</view>
				
				<!-- 搜索页面 -->
				<view v-if="mode==='search'">
					<view :style="{height:statusHeight*2 +'rpx'}"></view>
					<view class="navbar-content">
						<view class="navbar-content-back">
							<uni-icons @click="back" type="back" size="30" color="#fff"></uni-icons>
						</view>
						<view class="navbar-content-search">
							<view class="navbar-content-search-icon">
								<uni-icons type="search" size="20"></uni-icons>
							</view>
							<input class="navbar-content-search-input" placeholder="输入搜索内容" @input="input"/>
							<view class="navbar-content-search-confirm" @click="searchConfirm">搜索</view>
						</view>
					</view>
				</view>
				
				<!-- 正常页面（只有返回和标题） -->
				<view v-if="mode==='normal'">
					<view :style="{height:statusHeight*2 +'rpx'}"></view>
					<view class="navbar-content-normal">
						<view class="navbar-content-normal-back">
							<uni-icons @click="back" type="back" size="30" color="#fff"></uni-icons>
						</view>
						<view class="navbar-content-normal-title">{{title}}</view>
					</view>
				</view>
				
				<!-- 正常页面（只有抽屉和标题） -->
				<view v-if="mode==='normalDrawer'">
					<view :style="{height:statusHeight*2 +'rpx'}"></view>
					<view class="navbar-content-normal">
						<view class="navbar-content-normal-back">
							<uni-icons @click="openDrawer" type="bars" size="30" color="#fff"></uni-icons>
						</view>
						<view class="navbar-content-normal-title">{{title}}</view>
					</view>
				</view>
				
				<!-- 正常页面（只有标题） -->
				<view v-if="mode==='justText'">
					<view :style="{height:statusHeight*2 +'rpx'}"></view>
					<view class="navbar-content-normal">
						<view class="navbar-content-normal-title" style="margin-left: 30rpx;">{{title}}</view>
					</view>
				</view>
				
				<!-- 店铺页面（返回和标题、顶部滑动选项） -->
				<view v-if="mode==='store'">
					<view :style="{height:statusHeight*2 +'rpx'}"></view>
					<view class="navbar-content-normal">
						<view class="navbar-content-normal-back">
							<uni-icons @click="back" type="back" size="30" color="#fff"></uni-icons>
						</view>
						<view class="navbar-content-normal-title">{{title}}</view>
					</view>
				</view>
				
			</view>
			<view class="box" :style="{height:(45 + statusHeight)*2+'rpx'}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/* 
			 main:左边抽屉按钮与中间的虚假搜索框，无标题
			 search:带返回按钮，中间一个真实搜索框，无标题
			 normal:仅带返回按钮和一个标题
			 normalDrawer:仅带抽屉按钮和一个标题
			 justText:仅带抽屉按钮和一个标题
			 */
			mode: {
				type: String
			},
			title:{
				type:String
			}
		},
		data() {
			return {
				height: 35,
				statusHeight: 20
			};
		},
		async created() {
			await this.$getSystemInfo().then(res => {
				//console.log(res);
				this.height = res.screenHeight / 13
				this.statusHeight = res.statusBarHeight
			})
			this.$emit("getHeight", this.height)
			//console.log("当前模式为" + this.mode);
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: "/pages/tabber/shop/shop-search/shop-search"
				})
			},
			back() {
				uni.navigateBack({

				})
			},
			searchConfirm() {
				this.$emit("search")
			},
			openDrawer() {
				this.$emit("drawer")
				//console.log("打开抽屉");
			},
			input(data){
				this.$emit("input",data.detail.value)
			}
		}
	}
</script>

<style lang="scss">
	
	.all {
		display: flex;
		flex-direction: column;
		
		.navbar {
			display: flex;
			flex-direction: column;
			background-color: $my-main-color;
			.box{
				
			}
			.navbar-flex {
				position: fixed;
				top: 0;
				width: 100%;
				background-color: $my-main-color;
				left: 0;
				//border: 2rpx green solid;
				z-index: 99;

				.navbar-content-normal {
					display: flex;
					//border: 2rpx red solid;
					height: 100%;
					flex-direction: row;
					box-sizing: border-box;
					align-items: center;
					position: relative;
					top: 10rpx;
					.navbar-content-normal-back {
						width: 60rpx;
						height: 100%;
						
						margin-left: 10rpx;
					}

					.navbar-content-normal-title {
						color: #fff;
						font-size: 36rpx;
						margin-left: 20rpx;
						font-weight: bold;
					}
				}

				.navbar-content {
					display: flex;
					//border: 2rpx red solid;
					height: 100%;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					position: relative;

					.navbar-content-back {
						position: absolute;
						left: 10rpx;
						//bottom: 0;
					}
					
					.navbar-content-back-normal{
						position: absolute;
						left: 10rpx;
					}

					.navbar-content-search {
						background-color: #fff;
						width: 70%;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						margin: 10rpx 0rpx;
						height: 70rpx;
						padding: 0 20rpx;

						//border: 2rpx red solid;
						.navbar-content-search-text {
							font-size: 28rpx;
							color: #ccc;
							margin-left: 20rpx;
						}

						.navbar-content-search-input {
							//border: 2rpx red solid;
							margin: 20rpx;
							width: 100%;
						}

						.navbar-content-search-confirm {
							color: $my-main-color;
							width: 100rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
